<script src="../ExternalLibrary/js/vue.js"></script>

<!-----------------------------原始的html标签 start---------------------------->
<fieldset>
    <legend>01.双向绑定会输出原始的html标签</legend>
    <p id="htmlId">{{htmlContent}}</p><!--这将输出原始的html标签-->

    <script>
        var oHtml = new  Vue({
            el:"#htmlId",
            data:{
                htmlContent:"<span>有html标签</span>"
            }
        })
    </script>
</fieldset>

<!-----------------------------原始的html标签 end---------------------------->

<!-----------------------------使html标签生效 start---------------------------->
<fieldset>
    <legend>02.双向绑定使html标签生效</legend>
    <p id="useHtml" v-html="useHtml"><!--{{useHtml}}--></p><!--这里有没有{{useHtml}}效果一样-->
    <script>
        var oUse = new Vue({
            el:"#useHtml",
            data:{
                useHtml:"<span>有html标签</span>"//容易引起xss攻击
            }
        })
    </script>
</fieldset>
<!-----------------------------使html标签生效 end---------------------------->
